<!--
* @FileDescription:用于稳升井组的可点击表格组件
-->
<template>
  <a-table
    v-if="fatherdata && fathercolumns"
    :rowKey="fathercolumns[0]['key']"
    :dataSource="fatherdata"
    :columns="fathercolumns"
    :pagination="fatherpagination"
    :scroll="{ x: '100%', y: 550 }"
    size="small"
  >
    <template #acol="{ text }">
      <!--
         
      -->
      <el-button type="text" @click="colClicked(text)">
        {{ text }}
      </el-button>
    </template>
    <template #title>
      <el-button type="text" @click="emitarray('allblocks', allblocks)">
        <span> 合计：</span>
        <a-tag color="grey">{{ fatherdata.length }} </a-tag>
      </el-button>
      <br />
      <el-button type="text" @click="emitarray('upblocks', upblocks)">
        <span>稳升：</span>
        <a-tag color="green">{{ upblocksnum }} </a-tag>
      </el-button>
      <el-button type="text" @click="emitarray('stayblocks', stayblocks)">
        <span>平稳：</span>
        <a-tag color="geekblue">{{ stayblocksnum }} </a-tag>
      </el-button>
      <el-button type="text" @click="emitarray('downblocks', downblocks)">
        <span>下降：</span>
        <a-tag color="volcano">{{ downblocksnum }}</a-tag>
      </el-button>
    </template>
    <template #undulation="{ text }"
      ><a-tag :color="text < 0 ? 'volcano' : text > 0 ? 'green' : 'geekblue'">
        <i
          class="el-icon-top-right"
          v-if="text > 0"
          style="font-weight: bolder"
        >
        </i>
        <i
          class="el-icon-bottom-right"
          v-if="text < 0"
          style="font-weight: bolder"
        >
        </i>
        <i class="el-icon-right" v-if="text == 0" style="font-weight: bolder">
        </i>
      </a-tag>
    </template>
  </a-table>
</template>

<script>
export default {
  props: ["fatherdata", "fathercolumns", "fatherpagination", "undulation"],
  components: {},

  methods: {
    colClicked(text) {
      this.$emit("emittext", text);
    },
    emitarray(name, array) {
      this.$emit(name, array);
    },
    emitallblocks() {
      this.$emit("allblocks", this.allblocks);
    },
  },
  data() {
    return {
      upblocksnum: "",
      downblocksnum: "",
      stayblocksnum: "",
      allblocks: "",
      upblocks: "",
      downblocks: "",
      stayblocks: "",
    };
  },
  watch: {
    fatherdata: function () {
      this.allblocks = [];
      this.upblocks = [];
      this.downblocks = [];
      this.stayblocks = [];
      this.upblocksnum = 0;
      this.stayblocksnum = 0;
      this.downblocksnum = 0;
      this.fatherdata.forEach((element) => {
        let bn = element["block"];
        this.allblocks.push(bn);
        if (Object.values(element)[1] < 0) {
          this.downblocksnum++;
          this.downblocks.push(bn);
        } else if (Object.values(element)[1] > 0) {
          this.upblocksnum++;
          this.upblocks.push(bn);
        } else {
          this.stayblocksnum++;
          this.stayblocks.push(bn);
        }
      });
    },
  },
};
</script>

<style>
.el-button {
  word-wrap: break-word;
}
</style>
